<template>
	<view class="outer-container">

		<uni-nav-bar statusBar="true"
			backgroundColor="#e8b768"
			color="#fff"
			leftIcon="back"
			@clickLeft="backLastPage"
			:title="menuDetail.name">
		</uni-nav-bar>

		<view class="like-share-container">
			<view class="like-share-box">
				<image v-if="isLiked"
					@tap="handleTapLike"
					src="../../static/img/vip-menu/liked.png"
					mode=""></image>
				<image v-else
					@tap="handleTapLike"
					src="../../static/img/vip-menu/xuhuan.png"
					mode=""></image>

				<image src="../../static/img/vip-menu/zhuanfa.png"
					mode=""></image>
			</view>
		</view>

		<view class="content-container">

			<view class="cover-container">
				<view @tap="toMyVip"
					class="cover-overlay"
					v-if="! userInfo.vip">
					<text>开通会员看视频做法</text>
					<button type="default">立即开通</button>
					<text>已是会员，立即登录 >

					</text>
				</view>

				<video :id="menuDetail.vid"
					:src="menuDetail.vid"
					:show-fullscreen-btn="false"
					object-fit="fill"
					class="video-common"
					@tap="handlePlay"
					@timeupdate="handleUpdate"
					@ended="handleEnded"></video>



			</view>

			<menu-title-section :menuDetail="menuDetail"
				:isVip="true"></menu-title-section>

			<ingredients-list @collectMenu="collectMenu"
				:isCollected="isCollected"
				:menuDetail="menuDetail"></ingredients-list>

			<menu-steps :menuDetail="menuDetail"></menu-steps>

			<menu-recommendation :recommendList="likeMenu"></menu-recommendation>
		</view>


	</view>
</template>

<script>
	import backLastPage from '../../mixins/backLastPage.js'
	import videoControls from '../../mixins/videoControls.js'
	export default {
		data() {
			return {
				showOverlay: true,
				menuDetail: null,
				likeMenu: [],
				userInfo: null,
				menu_id: '',
				isLiked: false,
				isCollected: false,
			}
		},
		mixins: [backLastPage, videoControls],
		onLoad(options) {
			// console.log(options);
			this.getMenuDetail(options.id);
			this.menu_id = options.id;
			
			this.getLikeMenu();
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
			// console.log(this.menu_id);
			this.record(this.userInfo._id, this.menu_id);
			if (this.userInfo.mylike.find(ele => ele == this.menu_id)) {
				this.isLiked = true;
			}
			if (this.userInfo.mycollect.find(ele => ele == this.menu_id)) {
				this.isCollected = true;
			}
		},
		methods: {

			collectMenu() {
				this.isCollected = !this.isCollected;
			},
			async handleTapLike() {
				let res = await this.$api.personal.like(this.userInfo._id, this.menu_id);
				if (res.code) {
					this.isLiked = true;
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				} else {
					this.isLiked = false;
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			},
			async getMenuDetail(_id) {
				let { message: res } = await this.$api.mSearch.getMenuDetail(_id);
				this.menuDetail = res[0];
				// console.log(this.menuDetail);
			},
			async getLikeMenu() {
				let { menus } = await this.$api.vipMember.getlikeMenu();
				this.likeMenu = menus;
			},
			
			async record(user_id, menu_id) {
				let res = await this.$api.personal.record(user_id, menu_id);
				console.log(res);
			},
			toMyVip() {
				uni.navigateTo({
					url:'/pages/my-vip/my-vip'
				})
			},

		}
	}
</script>

<style lang="scss"
	scoped>
	.outer-container {
		width: 100vw;
		position: relative;

		.like-share-container {
			position: absolute;
			top: 176rpx;
			left: 0;
			width: 750rpx;
			height: 55rpx;
			z-index: 1000;
			background-color: #e8b768;

			.like-share-box {
				position: absolute;
				top: 0;
				right: 30rpx;
				width: fit-content;
				height: 52rpx;

				image {
					width: 50rpx;
					height: 50rpx;

				}
			}
		}


		.content-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: calc(176rpx + 55rpx);
			left: 0;
			width: 750rpx;

			background-color: #f6f7f8;

			.cover-container {
				position: relative;
				width: 750rpx;
				height: 386rpx;

				.cover-overlay {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 100%;
					height: 100%;
					z-index: 100;
					background-color: rgba($color: #000000, $alpha: 0.5);

					text {
						color: #fff;
						font-size: 32rpx;
						padding: 36rpx 0;
					}

					button {
						color: #8e5e3c;
						width: 244rpx;
						height: 68rpx;
						line-height: 68rpx;
						font-size: 32rpx;
						font-weight: bold;
						background-image: linear-gradient(0deg,
								#f9e9cd 0%,
								#edd6b2 50%,
								#edd6b2 100%);
						border-radius: 34rpx;
					}

				}

				.video-common {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
